<template>
  <div id='change'>
    <div class='title'>
      <v-title></v-title>
      <van-form>
        <van-field name="旧密码"
          label="旧密码"
          v-model='password'
          placeholder="旧密码"
          :rules="[{ required: true, message: '请填写旧密码' }]" />
        <van-field name="新密码"
          label="新密码"
          placeholder="新密码"
          v-model='newPassword'
          :rules="[{ required: true, message: '请填写新密码' }]" />

        <van-field
          v-model="varifyCode"
          center clearable
          label="验证码"
          placeholder="请输入验证码">
          <template #button>
            <van-button
              size="small"
              :disabled='disable'
              @touchstart='getvarifyCode'
              color='rgba(26, 144, 255, 0.8)'>
              {{btnvalue}}
            </van-button>
          </template>
        </van-field>
        <div
          style="margin: 16px;">
          <br>
          <van-button round
            block
            @click='change'
            color='rgba(26, 144, 255, 0.8)'
            native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import title from './title'
import { Notify } from 'vant'
export default {
  name: 'change',
  data() {
    return {
      uid: '',
      password: '',
      newPassword: '',
      varifyCode: '',
      btnvalue: '发送验证码',
      disable: false,
      flag: true,
    }
  },
  props: {},
  components: {
    'v-title': title,
    [Notify.Component.name]: Notify.Component,
  },
  computed: {},
  watch: {},
  created() {
    this.uid = window.localStorage.getItem('uid')
  },
  mounted() {},
  methods: {
    change() {
      this.http({
        method: 'post',
        url: '/api/changePassword',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: {
          uid: this.uid,
          password: this.password,
          token: window.localStorage.getItem('token'),
          newPassword: this.newPassword,
          varifyCode: this.varifyCode,
          email: window.localStorage.getItem('email'),
        },
      }).then((res) => {
        if (res.data.data.status == 0) {
          Notify({
            type: 'success',
            message: res.data.msg,
            duration: 800,
          })
        } else {
          window.localStorage.clear()
          this.$router.replace('/login')
          Notify({
            type: 'warning',
            message: res.data.msg,
            duration: 800,
          })
        }
      })
    },
    getvarifyCode() {
      this.disable = true
      if (this.flag) {
        this.flag = false
        this.http({
          method: 'post',
          url: '/api/varifyCode',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          params: {
            email: window.localStorage.getItem('email'),
          },
        }).then((res) => {
          if (res.data.status == 0) {
            if (number == 0) {
              this.flag = true
            }
            var number = 30
            var timer = setInterval(() => {
              number--
              if (number >= 0) {
                this.btnvalue = `请稍等...${number}`
              } else {
                this.btnvalue = '发送验证码'
                this.disable = false
                clearInterval(timer)
                timer = null
              }
            }, 1000)
          } else {
            this.btnvalue = '发送验证码'
            this.disable = false
            Notify({
              type: 'warning',
              message: res.data.msg,
              duration: 800,
            })
          }
        })
      }
    },
  },
}
</script>

<style scoped lang='less'>
</style>
